<template>
  <div>
    <router-link class="header-back" 
                 to="/" 
                 tag="div"
                 v-show="showHeaderBack"
                 >
      <span class="iconfont icon-back" 
            @click="handleBackBtn">&#xe60c;</span>
    </router-link>
    <div class="header" 
         v-show="!showHeaderBack"
         :style="opacityStyle">
      <router-link class="header-left" 
                   to="/"
                   >
        <span class="iconfont header-left-back" 
              @click="handleBackBtn">&#xe60c;</span>
      </router-link>
      <h1>长隆野生动物世界</h1>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailtHeader",
  data: function(){
      return {
          showHeaderBack: true,
          showTopLeftBack: true,
          opacityStyle: {
              opacity: 0,
          }
      }
  },
  methods: {
      handleScroll: function() {
          var top = document.documentElement.scrollTop;
          if(top > 50) {
              var opacity = opacity > 1 ? 1 : (top / 150); //1以内的数除以100可以作为透明度，这里除以150,让透明度从0到1的时间久一点
              this.opacityStyle.opacity =  opacity;
              this.showHeaderBack = false;
          } else {
              this.showHeaderBack = true;
          }
      },
      handleBackBtn: function() {
         window.removeEventListener('scroll', this.handleScroll)
      }
     
  },
  mounted: function(){
      window.addEventListener('scroll', this.handleScroll)
  },
  // activated: function(){在App.vue的keep-alive表情 exclude="Detail"，所以这里的activated和deactivated钩子函数不会生效
  //     window.addEventListener('scroll', this.handleScroll)
  // },
  // deactivated:function(){
  //     window.removeEventListener('scroll', this.handleScroll)
  // },
};
</script>

<style lang="stylus" scoped >
@import '~styles/variables.styl';

.header-back {
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: .72rem;
  height: .72rem;
  line-height: .72rem;
  text-align: center;
  border-radius: .4rem;
  background-color: rgba(0, 0, 0, .6);
}

.header-back .icon-back {
  color: #fff;
  font-size: .4rem;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: .8rem;
  line-height: .8rem;
  text-align: center;
  color: #fff;
  font-size: .32rem;
  background-color: $bgColor;
  z-index: 2;
}

.header .header-left {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: .8rem;
    height: 100%;
}

.header .header-left .header-left-back {
    color: #fff;
    font-size: .4rem;
}

</style>


